import React, { useCallback, useEffect, useState } from 'react'
import style from './index.module.scss'
import MdEditor from 'react-markdown-editor-lite'
import { style as markDownStye, mdParser } from '@/utils/markdown'
import { passWordLogin } from '@/components/passMode'
import { addBlog, getBlogDetail } from '@/api'
// 导入编辑器的样式
import 'react-markdown-editor-lite/lib/index.css'
import { Input, Button, message, Tooltip } from 'antd'
import { PictureTwoTone } from '@ant-design/icons'
import { useHistory } from 'react-router-dom'
import UpImage from './upImage'
export default function NewAdd() {
  const history = useHistory<{ id: number | undefined }>()
  const id = history.location?.state?.id
  const [content, setContent] = useState('')
  const [cover, setCover] = useState('')
  const [title, setTitle] = useState('')
  const [viewShow, setViewShow] = useState(false)
  const [upImgShow, setUpImgShow] = useState(false)
  const mdEditorConfig = {
    view: {
      menu: false,
      md: true,
      html: true,
    },
    htmlClass: markDownStye.markdown_body,
  }
  const created = useCallback(async () => {
    await passWordLogin()
    setViewShow(true)
    if (!id) return
    const { data, status, msg } = await getBlogDetail({ blogId: id })
    if (!status) return message.warning(msg)
    setContent(data.content)
  }, [id])

  const submitBlog = async () => {
    if (title === '') return message.error('请填写标题')
    if (content === '') return message.error('请填写正文内容')
    const { status, msg } = await addBlog({ title, content, cover })
    if (!status) return message.warning(msg)
    setContent('')
    setTitle('')
    message.success('发表成功')
    history.push('/')
  }
  useEffect(() => {
    created()
  }, [created])
  return (
    <>
      {viewShow && (
        <div className={style.win}>
          <div className={style.head}>
            <Input
              placeholder="请输入标题"
              onBlur={(e) => setTitle(e.target.value)}
              className={style.left}
            />
            <div className={style.right}>
              {/* 插入封面图入口 */}
              <Tooltip title="添加封面图">
                <PictureTwoTone
                  className={`${style.update_img}`}
                  style={{ fontSize: 35 }}
                  twoToneColor={`${cover === '' ? '' : '#52c41a'}`}
                  onClick={() => setUpImgShow(true)}
                />
              </Tooltip>
              <Button type="primary" shape="round" onClick={submitBlog}>
                发布
              </Button>
            </div>
          </div>
          <MdEditor
            style={{ height: '100%' }}
            renderHTML={(text) => mdParser.render(text)}
            placeholder="开始编辑..."
            value={content}
            config={mdEditorConfig}
            onChange={(e) => setContent(e.text)}
          />
          <UpImage
            off={() => setUpImgShow(false)}
            upCover={(url) => setCover(url)}
            show={upImgShow}
          />
        </div>
      )}
    </>
  )
}
